<template>
  <div class="topic">
    <van-nav-bar title fixed left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        收藏
        <van-icon name="star" v-if="iscollected" size="20px" />
        <van-icon name="star-o" v-else size="20px" />
      </template>
    </van-nav-bar>
    <div class="topic_content" v-if="pageload.topicload">
      <h1>{{topic.topic_name}}</h1>
      <van-row type="flex" justify="center" align="center" class="topic-usershow">
        <van-col>
          <van-image :src="userimage" round width="30px" height="30px"></van-image>
        </van-col>
        <van-col>{{nickname}}</van-col>
        <van-col>{{topic.time}}</van-col>
        <van-col>{{topic.viewcount}}浏览</van-col>
      </van-row>
    </div>
    <van-loading type="spinner" v-else />
    <van-row type="flex" justify="center" align="center" class="topic_content_card">
      <van-col span="20">
        <div v-html="topic.content"></div>
      </van-col>
    </van-row>
    <van-row type="flex" justify="space-between" align="center" class="topic-like">
      <van-col @click="addlike">
        {{topic.likecount}}
        <van-icon name="like" v-if="isliked" />
        <van-icon name="like-o" v-else />
      </van-col>
      <van-col @click="inputcomment">
        {{topic.commentcount}}评论
        <van-icon name="ellipsis" size="18px" />
      </van-col>
    </van-row>
    <div>
      <comment-card :comment="item" v-for="item in comments" :key="item.index"></comment-card>
    </div>

    <van-popup
      v-model="bottom_popup"
      position="bottom"
      :overlay-style="{'background-color':'rgba(0,0,0,0)'}"
      :style="{ width: '100%'}"
    >
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="18">
          <van-field
            type="textarea"
            rows="1"
            :autosize="{ maxHeight: 75, minHeight: 10 }"
            v-model="commenttext"
            placeholder="评论"
          />
        </van-col>
        <van-col span="2">
          <van-icon name="smile-o" size="22" />
        </van-col>
        <van-col span="4">
          <van-button
            :disabled="commenttext===''"
            type="primary"
            size="small"
            @click="sendcomment"
          >发送</van-button>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
import CommentCard from './base/CommentCard'
export default {
  name: 'topic',
  data() {
    return {
      topic: {},
      comments: [],
      pageload: {
        topicload: false,
        userload: false,
        commentload: false
      },
      commenttext: '',
      bottom_popup: false,
      overlayShow: false,
      isliked: false,
      iscollected: false,
      nickname: '匿名者',
      userimage:
        'https://tse1-mm.cn.bing.net/th/id/OIP.WP5k6Zm8aoF0pqLFQ7FcPwHaO0?pid=Api&rs=1'
    }
  },
  mounted() {
    // 1.加载内容，
    this.$http
      .get('/topic/detail', {
        params: { topic_id: this.$route.query.topic_id }
      })
      .then(res => {
        if (res.data.status === 200) {
          this.topic = res.data.topic
          this.loaduser()
        }
        this.pageload.topicload = true
      })
      .catch(res => {})
    this.$http
      .get('/comment/get', { params: { topic_id: this.$route.query.topic_id } })
      .then(res => {
        if (res.data.status === 200) {
          this.comments = res.data.comments
          // 对评论进行排序，依照时间与热门进行排序，热门评论选择点赞大于20%的并且赞数大于5，或者赞数大于100，剩下依据时间排序
        }
        this.pageload.commentload = true
      })
      .catch(res => {})
    this.$http
      .get('/topic/UATstatus', {
        params: { topic_id: this.$route.query.topic_id }
      })
      .then(res => {
        if (res.data.status === 200) {
          this.isliked = res.data.isliked
          this.iscollected = res.data.iscollected
        }
      })
      .catch(res => {})
  },
  methods: {
    loaduser() {
      this.commen.getUserinfoByUsername(this.topic.user, res => {
        if (res.data.status === 200) {
          this.nickname = res.data.nickname
          this.userimage = res.data.userimage
        }
        this.pageload.userload = true
      })
    },

    addlike() {
      if (!this.isliked) {
        this.$http
          .get('/like/topic', {
            params: { topic_id: this.$route.query.topic_id, action: 1 }
          })
          .then(res => {
            if (res.data.status === 200) {
              this.isliked = true
            }
          })
          .catch(res => {})
      } else {
        this.$http
          .get('/like/topic', {
            params: { topic_id: this.$route.query.topic_id, action: 0 }
          })
          .then(res => {
            if (res.data.status === 200) {
              this.isliked = false
            }
          })
          .catch(res => {})
      }
    },
    inputcomment() {
      this.bottom_popup = true
    },
    sendcomment() {},
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      if (!this.iscollected) {
        this.$http
          .get('/collect/add', {
            params: { topic_id: this.$route.query.topic_id }
          })
          .then(res => {
            if (res.data.status === 200) {
              this.iscollected = true
            }
          })
          .catch(res => {})
      } else {
        this.$http
          .get('/collect/delete', {
            params: { topic_id: this.$route.query.topic_id }
          })
          .then(res => {
            if (res.data.status === 200) {
              this.iscollected = false
            }
          })
          .catch(res => {})
      }
    }
  },
  components: {
    CommentCard
  }
}
</script>

<style>
.topic {
  background-color: #fff;
}
.topic-usershow .van-col {
  padding: 0 5px;
  font-size: unset;
  color: gray;
}
.topic_content_card .van-col {
  color: black;
}
.topic-like {
  color: gray;
}
.topic-like .van-col {
  padding: 5px 20px;
}
</style>